import React from 'react';
import { Dropdown, Menu, Balloon } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import EditWebhooks from '../editWebhooks';
import DeleteConfirm from 'components/deleteConfirm';
import HistoryModal from '../historyModal';
import intl from '../../../../../../../../../../locale';

export default class TableAction extends React.Component {
  state = {
    isEditModalOpen: false,
    submitting: false,
    dropdownVisible: false,
    isHistoryModalOpen: false,
  };

  handleTest = (id) => {
    this.setState({
      dropdownVisible: false,
    });

    if (this.state.submitting) return;
    this.setState({ submitting: true });
    this.props.testHook(id, () => {
      this.setState({ submitting: false });
    });
  };

  onMoreClick = () => {
    const { dropdownVisible } = this.state;
    this.setState({
      dropdownVisible: !dropdownVisible,
    });
  };

  render() {
    const { record } = this.props;
    const { isEditModalOpen, dropdownVisible, isHistoryModalOpen } = this.state;
    return (
      <div>
        <EditWebhooks
          isModalOpen={isEditModalOpen}
          id={record.id}
          onClose={() => {
            this.setState({
              isEditModalOpen: false,
            });
          }}
          {...this.props}
        />

        <Dropdown
          triggerType="click"
          align="tr br"
          visible={dropdownVisible}
          onVisibleChange={(visible, type) => {
            this.setState({
              dropdownVisible: type === 'fromContent' ? true : visible,
            });
          }}
          trigger={<ButtonIcon name="more-line" onClick={this.onMoreClick} />}
        >
          <Menu autoWidth>
            <Menu.Item
              disabled={record.type === 'OrganizationHook'}
              onClick={() => {
                this.setState({ isEditModalOpen: true, dropdownVisible: false });
              }}
            >
              {record.type === 'OrganizationHook' ? (
                <Balloon.Tooltip
                  trigger={
                    <div>
                      {intl.get({
                        id: 'code-assets.containers.tableAction.Editing',
                        defaultMessage: '编辑',
                      })}
                    </div>
                  }
                  align="t"
                >
                  {intl.get({
                    id: 'code-assets.containers.tableAction.ItIsInheritedFromThe',
                    defaultMessage: '继承自企业 Webhooks 设置，不可编辑，如需修改请联系企业管理员',
                  })}
                </Balloon.Tooltip>
              ) : (
                <div>
                  {intl.get({
                    id: 'code-assets.containers.tableAction.Editing',
                    defaultMessage: '编辑',
                  })}
                </div>
              )}
            </Menu.Item>
            <Menu.Item onClick={() => this.handleTest(record.id)}>
              {intl.get({
                id: 'code-assets.containers.tableAction.TestHook',
                defaultMessage: '测试 Webhook',
              })}
            </Menu.Item>
            <Menu.Item
              onClick={() => {
                this.setState({ dropdownVisible: false, isHistoryModalOpen: true });
              }}
            >
              {intl.get({
                id: 'code-assets.containers.tableAction.History',
                defaultMessage: '历史',
              })}
            </Menu.Item>
            {record.type === 'OrganizationHook' ? (
              <Menu.Item disabled>
                <Balloon.Tooltip
                  trigger={
                    <div>
                      {intl.get({
                        id: 'code-assets.containers.tableAction.Delete',
                        defaultMessage: '删除',
                      })}
                    </div>
                  }
                  align="t"
                >
                  {intl.get({
                    id: 'code-assets.containers.tableAction.ItIsInheritedFromThe.1',
                    defaultMessage: '继承自企业 Webhooks 设置，不可删除，如需删除请联系企业管理员',
                  })}
                </Balloon.Tooltip>
              </Menu.Item>
            ) : (
              <Menu.Item>
                <DeleteConfirm
                  id={record.id}
                  remove={this.props.remove}
                  content=" Webhook"
                  align="l"
                  trigger={
                    <div>
                      {intl.get({
                        id: 'code-assets.containers.tableAction.Delete',
                        defaultMessage: '删除',
                      })}
                    </div>
                  }
                />
              </Menu.Item>
            )}
          </Menu>
        </Dropdown>

        {isHistoryModalOpen && (
          <HistoryModal
            isModalOpen={isHistoryModalOpen}
            web_hook_id={record.id}
            closeModal={() => {
              this.setState({
                isHistoryModalOpen: false,
              });
            }}
          />
        )}
      </div>
    );
  }
}
